import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { z } from '#/adapter/form';
import { userList } from '#/api/system/user';
import { useAreaStore } from '#/store/modules/area'; // 假设 # 是 src 目录的别名
import { getDictOptions } from '#/utils/dict';
import { renderDict } from '#/utils/render';

export const querySchema: FormSchemaGetter = () => [
  {
    component: 'Input',
    fieldName: 'name',
    label: '客户名称',
  },
  {
    component: 'Input',
    fieldName: 'contact',
    label: '联系人',
  },
  {
    component: 'Input',
    fieldName: 'contactPhone',
    label: '联系方式',
  },
  {
    component: 'ApiSelect',
    componentProps: {
      api: () => userList(),
      resultField: 'rows',
      labelField: 'nickName',
      valueField: 'userId',
      showSearch: true,
      filterOption: (input: string, option: any) => {
        return option.label.toLowerCase().includes(input.toLowerCase());
      },
    },
    fieldName: 'saleUserid',
    label: '销售',
  },
  {
    label: '国家',
    fieldName: 'countryId', // 注意：如果模型中是 countryId，这里也应保持一致
    component: 'Select',
    componentProps: () => {
      const areaStore = useAreaStore();
      return {
        options: areaStore.countries.map((country) => ({
          label: country.name, // 使用 AreaVO 中的 name 属性
          value: country.id, // 使用 AreaVO 中的 id 属性
        })),
        placeholder: '请选择国家',
        showSearch: true,
        filterOption: (input: string, option: any) => {
          // @ts-ignore
          return option.label.toLowerCase().includes(input.toLowerCase());
        },
      };
    },
  },
  {
    label: '地区',
    fieldName: 'areaId',
    component: 'AreaCascader',
    componentProps: {
      placeholder: '请选择所在地区',
    },
  },
];

// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
  { type: 'checkbox', width: 60 },
  {
    title: '客户ID',
    field: 'id',
  },
  {
    title: '客户名称',
    field: 'name',
  },
  {
    title: '联系人',
    field: 'contact',
  },
  {
    title: '联系方式',
    field: 'contactPhone',
  },
  {
    title: '销售',
    field: 'saleUserName',
  },
  {
    title: '地址类型',
    field: 'areaType',
    slots: {
      default: ({ row }) => {
        // 可选从DictEnum中获取 DictEnum.AREA_TYPE 便于维护
        return renderDict(row.areaType, 'area_type');
      },
    },
  },
  {
    title: '编辑人',
    field: 'updateByUserName',
  },
  {
    title: '编辑时间',
    field: 'updateTime',
  },
  {
    field: 'action',
    fixed: 'right',
    slots: { default: 'action' },
    title: '操作',
    width: 180,
  },
];

export const drawerSchema: FormSchemaGetter = () => [
  {
    label: '客户ID',
    fieldName: 'id',
    component: 'Input',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
  },
  {
    label: '客户名称',
    fieldName: 'name',
    component: 'Input',
    rules: z
      .string()
      .max(30, { message: '客户名称不能超过30个字符' })
      .nonempty({ message: '请输入客户名称' }),
  },
  {
    label: '联系人',
    fieldName: 'contact',
    component: 'Input',
    rules: z
      .string()
      .max(30, { message: '联系人不能超过30个字符' })
      .nonempty({ message: '请输入联系人' }),
  },
  {
    label: '联系方式',
    fieldName: 'contactPhone',
    component: 'Input',
    rules: z
      .string()
      .nonempty({ message: '请输入联系方式' })
      .regex(/^1[3-9]\d{9}$/, { message: '请输入有效的手机号码' }),
  },
  {
    component: 'ApiSelect',
    componentProps: {
      api: () => userList(),
      resultField: 'rows',
      labelField: 'nickName',
      valueField: 'userId',
      showSearch: true,
      filterOption: (input: string, option: any) => {
        return option.label.toLowerCase().includes(input.toLowerCase());
      },
    },
    fieldName: 'saleUserid',
    label: '销售',
    rules: 'required',
  },
  {
    label: '地址类型',
    fieldName: 'areaType',
    component: 'RadioGroup',
    componentProps: {
      // 可选从DictEnum中获取 DictEnum.AREA_TYPE 便于维护
      options: getDictOptions('area_type'),
      buttonStyle: 'solid',
      optionType: 'button',
    },
    defaultValue: '1',
  },
  {
    label: '地区',
    fieldName: 'areaId',
    component: 'AreaCascader',
    componentProps: {
      placeholder: '请选择所在地区',
    },
    rules: 'required',
    dependencies: {
      show: (values) => values.areaType === '1',
      triggerFields: ['areaType'],
    },
  },
  {
    label: '国家',
    fieldName: 'countryId', // 注意：如果模型中是 countryId，这里也应保持一致
    component: 'Select',
    rules: 'required',
    componentProps: () => {
      const areaStore = useAreaStore();

      // 确保数据已加载或缓存有效
      if (areaStore.areaData.length === 0 || areaStore.isCacheExpired) {
        areaStore.loadAreaData();
      }

      return {
        options: areaStore.countries.map((country) => ({
          label: country.name, // 使用 AreaVO 中的 name 属性
          value: country.id, // 使用 AreaVO 中的 id 属性
        })),
        placeholder: '请选择国家',
        showSearch: true,
        filterOption: (input: string, option: any) => {
          // @ts-ignore
          return option.label.toLowerCase().includes(input.toLowerCase());
        },
      };
    },
    dependencies: {
      show: (values) => values.areaType === '2',
      triggerFields: ['areaType'],
    },
    // 如果国家也需要必填，可以在显示时添加规则
    // rules: values => values.areaType === '2' ? 'required' : undefined,
  },
  {
    label: '详细地址',
    fieldName: 'address',
    component: 'Textarea',
    componentProps: {
      autoSize: { minRows: 2, maxRows: 6 },
      placeholder: '请输入详细地址',
    },
  },
  {
    label: '开户行',
    fieldName: 'bankName',
    component: 'Input',
  },
  {
    label: '银行账号',
    fieldName: 'bankAccountNo',
    component: 'Input',
  },
  {
    label: '税号',
    fieldName: 'taxId',
    component: 'Input',
  },
  {
    label: '备注',
    fieldName: 'remark',
    component: 'Textarea',
  },
];
